<template>
  <view class="content">
    <!-- 意见列表 -->
    <view v-if="state.loading"></view>
    <view class="no-data t-c" v-else-if="!state.dataSource.length">
      <image class="img" src="../../static/no-data.svg"></image>
      <view class="gray9 fz30">暂无意见</view>
    </view>
    <template v-else>
      <!-- 取包 -->
      <view
        class="info fz28 bg-white bdr20"
        v-for="item in state.dataSource"
        :key="item.id"
      >
        <view class="item flex flex-x-between">
          <view class="flex1 mr20">标题: {{ item.titile }}</view>
          <view class="main-theme-color" v-if="!item.reply">待回复</view>
        </view>
        <view class="item flex flex-x-between">
          <view>问题类别: {{ item.type }}</view>
          <view class="fz28 gray9">{{ item.createTime }}</view>
        </view>
        <view class="item flex flex-x-between" v-if="item.reply">
          <view>回复: {{ item.reply }}</view>
        </view>
      </view>
    </template>
  </view>
</template>

<script setup>
import { reactive, getCurrentInstance } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { queryComplaint } from "@/common/js/getData.js";

const { proxy } = getCurrentInstance();

const state = reactive({
  loading: true,
  isSend: false,
  dataSource: [],
});

// 页面加载完成
onLoad(async () => {
  await proxy.$onLaunched;
  loadData();
});

// 获取数据
const loadData = () => {
  queryComplaint()
    .then((res) => {
      state.dataSource = res.result;
    })
    .finally(() => {
      state.loading = false;
    });
};
</script>

<style lang="less" scoped>
@import url("@/common/less/common.less");

.info {
  line-height: 50rpx;
  padding: 40rpx;
  margin: 20rpx;

  .item {
    padding: 10rpx 0;
  }

  .title {
    border-bottom: 2rpx solid #eee;
    padding: 0 0 20rpx 0;
    margin-bottom: 20rpx;
  }
}
</style>
